<template>
    <div class="container">组件基础组成</div>
</template>

<script>
export default{
    data(){
        return{
            msg:"dwad"
        }
    }
}
</script>

<style>

.container{
    font-size: 40px;
    color:red;
}
</style>




<!-- <template>
    <div class="container">组件基础组成</div>
</template>

<script>
export default{
    data(){
        return{
            msg:"dwad"
        }
    }
}
</script>

<style>

.container{
    font-size: 40px;
    color:red;
}
</style> -->



<!-- <template>
    <div ref="container" class="container">{{ content }}</div>
    <input type="text" ref="username">
    <button @click="getElementHandler">获取元素</button>
</template>
<script>
export default{
    data(){
        return{
            content:"内容"
        }
    },

    methods:{
        getElementHandler(){
            this.$refs.container.innerHTML="HHHHHHH" ;
            console.log(this.$refs.username.value);
        }
    }
}
</script> -->



<!-- <template>
    <h3>表单输入与绑定</h3>
    <form>
        <input type="text" v-model.lazy="msg">
        <p>{{ msg }}</p>
        <input type="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
    </form>
</template>
<script>
export default{
    data(){
        return{
            msg:"",
            checked:false
        }
    }
}

</script> -->




<!-- <template>
    <h3>侦听器</h3>
    <p>{{ msg }}</p>
    <button @click="update">修稿数据</button>
</template>

<script>
export default{
    data(){
        return{
            msg:"Hello"
        }
    },

    methods:{
        update(){
            this.msg="World"
        }
    },

    watch:{
        msg(newValue,oldValue){
            console.log(newValue,oldValue);
        }
    }
}
</script> -->







<!-- <template>
    <p :style="{color:activecolor,fontSize:fontSize+'px'}">Style绑定</p>
 <p :style="ddd">Style绑定</p>
</template>

<script>
export default{
    data(){
        return{
            activecolor:'green',
            fontSize:30,
            ddd:{
                color:"red",
                fontSize:"40px"
            }
        }
    }
}
</script> -->


<!-- <template>
    <p :class="{'active':isActive}">Class绑定</p>
    <p :class="classObject">Class绑定2</p>
    <p :class="classBind">ClassTest</p>
    <p v-for="item in arr">{{ item }}</p>
</template>

<script>
export default{
    data(){
        return{
            isActive:true,

            arr:["jack","baj","ads"],

            classBind:{
                'ss':true,
                'dd':true
            },

            classObject:{
                'active':true
            }
        }
    }
}
</script>

<style>
.ss{
    color:blue
}
.dd{
    font-size:50px
}

.active{
    color:red;
    font-size:30px;
}
</style> -->

<!-- <template>
    <h3>{{ it.content }}</h3>
    <p>{{ it.content.length<0?"Yes":"No" }}</p>
    <p>{{ itMath }}</p>
</template>

<script>
export default{
    data(){
        return {
            it:{
                name:"hhj",
                age:20,
                content:["java","c","c++"],
                math:3+2
            }
        }
    },

    //计算属性
    computed:{
        itMath(){
            return this.math==5?"y":"n"
        }
    }
}
</script> -->


<!-- <template>
    <h3>数组变化侦听</h3> -->
    <!-- <button @click="addListHandle" >添加数据</button>
    <button @click="delListHandle" >减少数据</button>
    <ul>
        <li v-for="(item,index) of names" :key="index">{{ item }}</li>
    </ul> -->

    <!-- <button @click="add">添加</button>
    <ul>
        <li v-for="item in s1">{{ item }}</li>
    </ul>
</template>

<script>
export default{
    data(){
        return{
            names:["jack","alice","lee"],
            s1:[1,2,3,4,5],
            s2:[6,7,8,9,10]
        }
    },

    methods:{
        add(){
            this.s1=this.s1.concat(this.s2)
        },

        addListHandle(){
            this.names.push("hhj")
           
        },
        delListHandle(){
            this.names.pop()
        }
    }
}
</script> -->



<!-- <template>
<h3>事件修饰符</h3>
    <a @click.prevent="clickHandle" href="www.baidu.com">百度</a>
    <div @click="clickDiv">
        <p @click.stop="clickP">测试冒泡</p>
    </div>
</template>

<script>
export default{
    data(){
        return{

        }
    },

    methods:{
        clickHandle(e){
            
            console.log("点击了 ")
        },

        clickDiv(e){
            console.log("DIV")
        },

        clickP(e){
            console.log("P")
        }
    }
}
</script> -->


<!-- <template>
 测试事件
    <p @click="getNameHandler(item,$event)" v-for="item in names" :key="index">{{ item }}</p>
</template>

<script>

export default{
    data(){
        return{
            names:["jack","alice","jion"]
        }
    },

    methods:{
        getNameHandler(item,e){
            console.log(item);
            console.log(e);
        }
    }
}
</script> -->



<!-- 
<template>
<h3>内联事件</h3>

<button @click="addCount">add</button>
<button @click="delcount">dda</button>
<p>{{ count }}</p>
</template>

<script>

export default{
    data(){
        return {
            count:0
        }
    },
    //
    methods:{
        addCount(e){
            e.target.innerHTML="Add"+this.count
            this.count++
        },

        delcount(e){
            console.log(e)
            this.count--
        }
    }
}
</script> -->







<!-- <template>
    
    <h3>列表渲染</h3>
    <p v-for="(item,index) in names" :key="index">{{ item }}-{{ index }}</p>
    <h1>{{ msg+"uhawhfawkdhakdha" }}</h1>

    <div>
        <p v-for="item in userinfo">{{ item }}</p>
    </div>
</template>

<script>
export default{
    data(){
        return{
            names:["哈哈哈","wushi"],
            userinfo:{
                name:"hhj",
                age:18,
                sex:"male"
            },

            msg:"woshishuaige"
        }
    }
}
</script> -->

